import React from 'react';

import { NavBar, Icon } from 'antd-mobile';
// 导入长列表数据懒加载插件
import { List, AutoSizer } from 'react-virtualized';


import { getCurrentCity } from '../../utils/index.js';

import './index.less';

// 格式化城市数据函数
const formatCityData = (arr) => {
    // 格式化后的城市列表数据 { a:[{},{}...],b:[{},{}...],...}
    const cityList = {}
    for (const i of arr) {
        cityList[i.short[0]] || (cityList[i.short[0]] = [])
        cityList[i.short[0]].push(i)
    }
    // 城市首字母数组 [ 'a', 'b', ...]
    const cityIndexLists = Object.keys(cityList).sort()
    return { cityList, cityIndexLists }
}

// // 以字符串数组的形式列出数据
// const list = new Array(100).fill('value')

// function rowRenderer({
//     key,         // 行数组中的唯一键
//     index,       // 集合内的行索引
//     isScrolling, // 当前正在滚动列表
//     isVisible,   // 这个行在列表中是可见的(例如它不是一个被过度扫描的行)
//     style        // 将应用于行(定位该行)的样式对象
// }) {
//     return (
//         <div
//             key={key}
//             style={style}
//         >
//             {list[index]}
//         </div>
//     )
// }

const letterSign = {
    '#': '当前定位',
    'hot': '热门城市'
}

// 封装处理字母索引的方法
const formatCityIndex = letter => {
    /* switch (letter) {
    //     case '#':
    //         return '当前定位'
    //     case 'hot':
    //         return '热门城市'
    //     default:
    //         return letter.toUpperCase()
    // }*/
    return letterSign[letter] || letter.toUpperCase()
}
// 索引（A、B等）的高度
const TITLE_HEIGHT = 36
// 每个城市名称的高度
const NAME_HEIGHT = 50

export default class CityList extends React.Component {
    state = {
        cityList: {},
        cityIndexLists: [],
        // 指定右侧字母索引列表高亮的索引号
        activeIndex: 0
    }

    componentDidMount() {
        this.getCity()
    }

    // 获取城市信息
    async getCity() {
        const res = await (await fetch('http://localhost:8080/area/city?level=1')).json()
        const { cityList, cityIndexLists } = formatCityData(res.body)
        // 热门城市
        const { body: hotCity } = await (await fetch('http://localhost:8080/area/hot')).json()
        cityList.hot = hotCity;
        cityIndexLists.unshift('hot');
        // 当前定位城市
        const current = await getCurrentCity();
        cityList['#'] = [current];
        cityIndexLists.unshift('#');
        console.log(cityList, cityIndexLists)
        this.setState({
            cityList,
            cityIndexLists
        })

    }


    // List组件渲染每一行的方法：
    rowRenderer = ({
        key, // Unique key within array of rows
        index, // 索引号
        isScrolling, // 当前项是否正在滚动中
        isVisible, // 当前项在 List 中是可见的
        style // 注意：重点属性，一定要给每一个行数据添加该样式！作用：指定每一行的位置
    }) => {
        // 获取每一行的字母索引
        const { cityIndexLists, cityList } = this.state
        const letter = cityIndexLists[index]

        // 获取指定字母索引下的城市列表数据
        // console.log(cityList[letter])
        return (
            <div key={key} style={style} className="city">
                <div className="title">{formatCityIndex(letter)}</div>
                {cityList[letter].map(item => (
                    <div className="name" key={item.value}>
                        {item.label}
                    </div>
                ))}
            </div>
        )
    }
    // 创建动态计算每一行高度的方法
    getRowHeight = ({ index }) => {
        // 索引标题高度 + 城市数量 * 城市名称的高度
        // TITLE_HEIGHT + cityList[cityIndex[index]].length * NAME_HEIGHT
        const { cityList, cityIndexLists } = this.state
        return TITLE_HEIGHT + cityList[cityIndexLists[index]].length * NAME_HEIGHT
    }
    // 封装渲染右侧索引列表的方法
    renderCityIndex() {
        // 获取到 cityIndex，并遍历其，实现渲染
        const { cityIndexLists, activeIndex } = this.state
        return cityIndexLists.map((item, index) => (
            <li className="city-index-item" key={item}>
                <span className={activeIndex === index ? 'index-active' : ''}>
                    {item === 'hot' ? '热' : item.toUpperCase()}
                </span>
            </li>
        ))
    }

    render() {
        return (
            <div className='citylist'>
                {/* 顶部导航栏 */}
                <NavBar
                    mode="light"
                    icon={<i className='iconfont icon-back' />}
                    onLeftClick={() => this.props.history.go(-1)}
                >城市选择</NavBar>
                {/* 城市列表 */}
                <AutoSizer>
                    {({ height, width }) => (<List
                        width={width}
                        height={height - 45}
                        rowCount={this.state.cityIndexLists.length}
                        rowHeight={this.getRowHeight}
                        rowRenderer={this.rowRenderer}
                    />)}
                </AutoSizer>
                {/* 右侧索引列表 */}
                {/* 
                    1 封装 renderCityIndex 方法，用来渲染城市索引列表。
                    2 在方法中，获取到索引数组 cityIndex ，遍历 cityIndex ，渲染索引列表。
                    3 将索引 hot 替换为 热。
                    4 在 state 中添加状态 activeIndex ，指定当前高亮的索引。
                    5 在遍历 cityIndex 时，添加当前字母索引是否高亮的判断条件。
                    */}
                <ul className="city-index">{this.renderCityIndex()}</ul>
            </div>
        )
    }
}